<template>
  <div class="realTimeNews-realTimeNews">

    <div class="margin_top_20">
      <div class="row_item">选择行业</div>
      <!-- 标签列表 -->
        <first-label-class @init-ok="getMeatilSecondLevel" @select-label="getMeatilSecondLevel"></first-label-class>
    </div>

    <div class="margin_top_20" v-show="false">
      <div class="row_item">二级行业</div>
      <!-- 标签列表 -->
        <second-label-class :firstLevelId="firstLevelValueIndex" @init-ok="getMContentAll"  @select-label="getMContentAll"></second-label-class>
    </div>

    <div class="margin_top_20">
      <div class="input-group width_400px">
        <input type="text" class="form-control" v-model="keyWords" placeholder="搜索" v-on:keyup.enter="searchAction">
          <span class="input-group-btn">
          <button type="button" class="btn btn-primary" @click="searchAction"><i class="fa fa-search"></i> 本栏目搜索</button>
        </span>
      </div>
      <!-- 标签列表 -->
    </div>

      <div class="margin_top_20">
          <article-list-filter @time-filter-action="timeFilterAction" @content-type-action="contentTypeAction"></article-list-filter>
      </div>
    <div class="margin_top_20">
      <Table :columns="columns1" :data="articleList" @on-sort-change="sortChangeAction"></Table>
    </div>
      <div class="page_center">
          <Page :total="articleListCount" :current="currentPage" @on-change="pageChangeAction" show-elevator></Page>
      </div>
  </div>
</template>

<script>
import $ from "jquery"
import firstLabelClass from "./child/firstLabelClass.vue"
import secondLabelClass from "./child/secondLabelClass.vue"

import labelListRadio from "../../components/labelListRadio.vue"
// 文章筛选的组件
import articleListFilter from "../../components/articleListFilter.vue"
// 发送ajax 请求的组件
import getData from '../../api/getData'
// 分页的配置信息
import {page_config} from '../../config/config'

var realTimeNewsLogic = {
    // 根据类目查询爆文素材内容
    getMeatilSecondLevelContentList: function (vueObj) {

        var mid1 = vueObj.firstLevelValueIndex;
        var mid2 = vueObj.secondLevelValueIndex;

        var paramObj = {
//            一级类目ID
            "MID1": mid1,
//            二级类目ID
            "MID2": mid2,
//            文本1 图片2 视屏3 全部0
            TypeID: 0,
            // 0 表示搜索所有的数据，7 表示搜索7天之前的
            Date: 0,
            orderType:vueObj.orderType,
//            1 发布时间 2评论数 3 阅读量
            orderName:vueObj.orderName,
            pageSize: page_config.pagesize,
            pageIndex: vueObj.currentPage
        };
        // 添加关键字参数
        if(vueObj.keyWords != ""){
            paramObj["MCNAME"]=vueObj.keyWords;
        }
        // 时间过滤对象
        if(vueObj.dateFilterObj != null){
            paramObj["Date"]=vueObj.dateFilterObj.valueKey;
            console.log("vueObj.dateFilterObj.valueKey ：" + vueObj.dateFilterObj.valueKey)
        }
        // 类型过滤对象
        if(vueObj.typeFilterObj != null){
            paramObj["TypeID"]=vueObj.typeFilterObj.valueKey;
            console.log("vueObj.typeFilterObj.valueKey ：" + vueObj.typeFilterObj.valueKey)
        }

        getData.post("getMeatilSecondLevelContentList", paramObj).then(function (response) {
            vueObj.articleList = response.data.data;
            vueObj.articleListCount = response.data.PageCount;
//            console.log("JSON.stringify(tempData) : " + JSON.stringify(tempData));
        })
        .catch(function (response) {
            console.log(response);
        });

    },

    // 收藏 或者 取消收藏  向服务器打交道
    collectAction: function( url, param, vueObj ){
        getData.post( url, {MCTID: param.MCTID} ).then(function (response) {
            var data = response.data;
            if(data.code == 0){
                param.ISSC = param.ISSC ? 0 : 1;
            }else{
                vueObj.$Message.info( data.msg ? data.msg : '网络错误，请稍后重试');
            }
        }).catch(function (response) {
            console.log(response);
        });
    }
};

export default {
    // 组件初始化完成触发的事件
    mounted: function () {
    },
    data: function () {
        return {
            // 一级类目的索引
            firstLevelValueIndex:"",
            // 二级类目的索引
            secondLevelValueIndex:"",
            // 列表的总数据数
            articleListCount:0,
            //关键字
            keyWords:"",
            // 时间过滤对象
            dateFilterObj:null,
            // 类型过滤对象
            typeFilterObj:null,
            columns1: [
                {
                    title: '缩略图',
                    key: 'Image',
                    render: (h, params) => {
//                        console.log("params.row.MCTImage ： " + params.row.MCTImage);
                        var imgUrl = null;
                        if(params.row.MCTImage == ""){
                            imgUrl = require('../../../static/img/logo_.jpg');
                        }else{
                            imgUrl = params.row.MCTImage;
                        }
                        return h('div', {
                            attrs: {
                                style: 'width:50px;height: auto'
                            },
                        }, [
                            h('img', {
                                // 正常的 HTML 特性
                                attrs: {
                                    src: imgUrl,
                                    style: 'width:100%;height: auto;'
                                },
                                on: {
                                    click: function () {
//                                        console.dir(arguments);
//                                        return false;
                                    }
                                }
                            })
                        ]);
                    }
                },
                {
                    title: '标题',
                    key: 'MCTTitle',
                    ellipsis: true,
                    render: (h, params) => {
                        return h('div', [
                            h('a', {
                                attrs: {
                                    href: params.row.MCTURL,
                                    target:"_blank",
                                    title: params.row.MCTTitle
                                },
                            }, params.row.MCTTitle)
                        ]);
                    }
                },
                {
                    title: '类型',
                    key: 'TypeName'
                },
                {
                    title: '来源',
                    key: 'MCTSource',
                    align: "center"
                },
                {
                    title: '时间',
                    key: 'RDate',
                    sortable: true
                },
                {
                    title: '阅读',
                    key: 'MCTAmout',
                    sortable: true
                },
                {
                    title: '评论',
                    key: 'MCTCommentNum',
                    sortable: true
                },
                {
                    title: '收藏',
                    key: 'ISSC',
                    render: (h, params) => {
                        return h('div', [
                            h('span', {
                                on: {
                                    click: () => {
                                        this.markFavorite( params.row );
                                    }
                                }
                            }, [
                                h('Icon', {
                                    props: {
                                        type: params.row.ISSC ? 'star' : 'ios-star-outline'
                                    },
                                    style: {
                                        fontSize: '20px'
                                    }
                                })
                            ])
                        ]);
                    },
                }
            ],
            articleList:[],
            // 当前页面数
            currentPage:1,
//            1降序 2升序
            orderType:1,
//            1 发布时间 2评论数 3 阅读量
            orderName:1,
        }
    },

    methods: {
        // firstLevelObj 为一级自定义内容的选项
        getMeatilSecondLevel: function (selectedLevelObj,selecedIndex) {
            this.firstLevelValueIndex = selecedIndex;
        },
        // 标记收藏或者取消收藏
        markFavorite( param ){
            var url = param.ISSC == 1 ? 'getMeatilNSC' : 'getMeatilSC';
            realTimeNewsLogic.collectAction( url, param, this);
        },
        // 本栏目搜索
        searchAction: function () {
            this.currentPage = 1;
            realTimeNewsLogic.getMeatilSecondLevelContentList(this);
        },
        // 点击二级分类 刷新列表
        getMContentAll: function (secondLevelObj, mid) {
            this.currentPage = 1;
            this.secondLevelValueIndex = mid;
            realTimeNewsLogic.getMeatilSecondLevelContentList(this);
        },
        // 点击选中的标签
        timeFilterAction: function(filterObj){
            this.currentPage = 1;
            // 时间过滤对象
            this.dateFilterObj = filterObj;
            realTimeNewsLogic.getMeatilSecondLevelContentList(this);
        },
        // 点击选中的标签
        contentTypeAction: function(filterObj){
            this.currentPage = 1;
            // 类型过滤对象
            this.typeFilterObj = filterObj;
            realTimeNewsLogic.getMeatilSecondLevelContentList(this);
        },

        // 分页触发的事件
        pageChangeAction:function (currentPage) {
            this.currentPage = currentPage;
            realTimeNewsLogic.getMeatilSecondLevelContentList(this);
        },
        // 排序的问题
        sortChangeAction: function(sortJson){
            var order = sortJson.order;
            var key = sortJson.key;
            if(key == "RDate"){
                this.orderName = 1;
            }
            if(key == "MCTAmout"){
                this.orderName = 3;
            }
            if(key == "MCTCommentNum"){
                this.orderName = 2;
            }
            if(order == "desc"){
                this.orderType = 1;
            }else{
                this.orderType = 2;
            }
            realTimeNewsLogic.getMeatilSecondLevelContentList(this);
        }
    },
    components: {
        labelListRadio,
        firstLabelClass,
        secondLabelClass,
        articleListFilter
    }
}
</script>

<style scoped lang="scss">
    .realTimeNews-realTimeNews{

    }
</style>
